<template>
  <a-card title="团购详情" class="group-order-info">
    <div class="form-title">团购信息：</div>
    <div class="group-order-info-item">
      <a-row style="margin-bottom: 10px">
        <a-col :span="8">团购编号：{{ groupOrderInfo.id }}</a-col>
        <a-col :span="8">团购状态：{{ groupOrderInfo.groupStatus | filterGroupStatus }}</a-col>
        <a-col :span="8">购买用户：{{ groupOrderInfo.userName }}</a-col>
      </a-row>
      <a-row>
        <a-col :span="8">开团时间：{{ groupOrderInfo.startTime }}</a-col>
        <a-col :span="8">结束时间：{{ groupOrderInfo.endTime }}</a-col>
      </a-row>
    </div>
    <div class="form-title">商品信息：</div>
    <div class="group-order-info-item">
      <a-row>
        <a-col :span="8"><table-img style="width: 80px; height: 80px;" :src="groupOrderInfo.goodsPictures.split(',')[0]" /></a-col>
        <a-col :span="8">商品名称：{{ groupOrderInfo.goodsName }}</a-col>
      </a-row>
    </div>
    <div class="form-title">参团信息：</div>
    <div>
      <search-table
        style="margin-top: 20px;"
        :url="url"
        :headParams="headParams"
        :defaultParams="defaultParams"
        ref="searchtable"
        :columns="columns">
        <template slot="goodsOrderStatusSlot" slot-scope="{ text }">
          {{ text | goodsOrderStatusFilter }}
        </template>
        <template slot="tableOperation" slot-scope="{ record }">
          <a-space>
            <permission v-if="showDetailBtn(record)" authority="group:activity:info">
              <span
                class="text-primary pointer"
                @click="openInfo(record)">订单详情</span>
            </permission>
          </a-space>
        </template>
      </search-table>
    </div>
    <div class="footer">
      <a-button @click="handleCancel">返回</a-button>
    </div>
  </a-card>
</template>

<script>
export default {
  computed: {
    // 团购详情id
    id() {
      return this.$route.query.id || "";
    },
  },
  data() {
    return {
      groupOrderInfo: {},
      url: '/group/member/page',
      headParams: { baseURL: `${location.origin}/goldenhome/ghgroup/admin` },
      defaultParams: {
        groupId: this.$route.query.id || ""
      },
      currentRecord: {},
      columns: [
        {
          title: "用户头像",
          dataIndex: "userAvatar",
          key: "userAvatar",
          align: 'center',
          customRender: (text, row) => {
            return <div class="product_td"><table-img src={text}/></div>
          }
        },
        {
          title: "用户昵称",
          dataIndex: "userName",
          key: "userName",
        },
        {
          title: "参团时间",
          dataIndex: "joinTime",
          key: "joinTime",
        },
        {
          title: "订单号码",
          dataIndex: "groupOrderNo",
          key: "groupOrderNo",
        },
        {
          title: "订单状态",
          dataIndex: "groupOrderPayStatus",
          key: "groupOrderPayStatus",
          customRender: (text, record)=> {
            // console.log(text) 
            let res = ''
            switch (text) {
              case 'ORDER_UNPAID':
                res = '待付款'
                break;
              case 'ORDER_CANCEL':
                res = '订单已取消'
                break;
              case 'ORDER_PAY':
                if(record.groupActivityType == 1) {
                  res = '已付款'
                } else if(record.groupActivityType == 2) {
                  if(record.goodsOrderPayStatus == 'ORDER_PAY'){
                    res = '已付款'
                  } else if(record.goodsOrderPayStatus == 'ORDER_UNPAID') {
                    res = '尾款未支付'
                  }
                }
                break;
              case 'ORDER_UN_ISSUE':
                res = '待发货'
                break;
              case 'ORDER_UN_RECEIVED':
                res = '待收货'
                break;
              case 'ORDER_UN_EVALUATE':
                res = '待评价'
                break;
              case 'ORDER_FINISH':
                res = '已完成'
                break;
            }
            return res
          }
        },
        {
          title: "操作",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
        }
      ]
    };
  },
  filters: {
    filterGroupStatus (value) {
      let res = ''
      switch (value) {
        case 'GROUP_RUNNING':
          res = '拼团中'
          break;
        case 'GROUP_SUCCESS':
          res = '拼团成功'
          break;
        case 'GROUP_FAIL':
          res = '拼团失败'
          break;
        default:
          res = ''
          break;
      }
      return res
    },
  },
  created() {
    this.getGroupBargainingInfo(this.id)
  },
  mounted() {},
  methods: {
    showDetailBtn(record) {
      let res = false
      if(record.groupActivityType == 1) {
        record.groupStatus == 'GROUP_SUCCESS' ? res = true : res = false
      } else if(record.groupActivityType == 2) {
        record.groupStatus == 'GROUP_SUCCESS' && record.goodsOrderPayStatus == 'ORDER_PAY' && record.isRealMember == 1 ? res = true : res = false
      }
      return res
    },
    async getGroupBargainingInfo(id){
      let res = await this.$get('/group/id',
        { id },
        { baseURL: `${location.origin}/goldenhome/ghgroup/admin` });
      if(res && res.returnCode=='1000'){
        console.log(res.dataInfo)
        this.groupOrderInfo = res.dataInfo
      }
    },
    openInfo(record) {
      this.currentRecord = record;
      let jumpPageId = ''
      switch (record.groupActivityType) {
        case 1:
          jumpPageId = record.tbGoodsOrderId
          break;
        case 2:
          jumpPageId = record.endTbGoodsOrderId
          break;
      }
      this.$router.push({
        name: "OrderListInfo",
        query: {
          id: jumpPageId,
          groupId: this.id,
          source: 'group'
        },
      });
    },
    handleCancel(){
      this.$router.push({
        name:'OrderGroupBargaining',
      })
    },
  }
};
</script>

<style lang="less" scoped>
.group-order-info-item{
  margin-bottom: 20px;
}
.product_td{
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer{
  margin-top: 20px;
  text-align: center;
}
</style>
